<template>
    <div @click.capture="contentClick">
        <setHeader :title="headTitle" :settext="settext" @done="gotobtn()"></setHeader>
        <div class="content" style="background-color: #f5f5f5;">
            <el-tree
                :data="treeData"
                :props="defaultProps"
                node-key="id"
                ref="tree"
                default-expand-all
                :expand-on-click-node="false"
                @node-drag-start="handleDragStart"
                @node-drag-enter="handleDragEnter"
                @node-drag-leave="handleDragLeave"
                @node-drag-over="handleDragOver"
                @node-drag-end="handleDragEnd"
                @node-drop="handleDrop"
                draggable
                :allow-drop="allowDrop"
                :allow-drag="allowDrag"  
                @node-click="handleNodeClick">
                <!-- :expand-on-click-node="false"  禁止收缩 -->
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span v-if="isEdit" contenteditable="false">{{ node.label }}</span>
                  <span v-else contenteditable="true" class="edit_dash">{{ node.label }}</span>
                  <span class="custom_tree_icon">
                    <el-button
                      type="text"
                      size="mini">
                      <strong class="clear" style="display: block;">
                        <img :src="activeitem" alt="" class="treeImg fl" v-for="(activeitem, act) in data.img.slice(0,3)" :key="act">
                        <i class="iconfont icon-gengduo tree_more fl" v-if="data.img.length > 3"></i>
                        <!-- 点击三点下拉 -->
                        <i :class="treeIconName" class="treeicon fr" v-if="insertIconShow" @click="handClick(data, data.id)"></i>
                        <!-- 切换删除 -->
                        <i :class="delIconName" class="deltreeicon fr" v-if="delIconShow" @click="delClick(data.id)"></i>
                      </strong>
                      <span class="dropDownpanel_icon" v-if="dropintopShow" :class="{'active': ind === data.id}">
                          <span class="dropdown_triangle"></span>
                          <a href="javascript:void(0)" @click="addSame(deId,1)" v-show="dropShow"><i class="iconfont icon-tongji"></i>添加同级</a>
                          <a href="javascript:void(0)" @click="addSame(deId,2)" v-show="dropShow"><i class="iconfont icon-qiyejiagou"></i>添加下级</a>
                          <a href="javascript:void(0)" @click="editorDel(deId)" v-show="dropShow"><i class="iconfont icon-bianji1"></i>编辑</a>
                          <a href="javascript:void(0)" @click="showTeam(data)" v-show="updorownShow"><i class="iconfont icon-tongshi"></i>我的同事</a>
                      </span>
                    </el-button>
                  </span>
              </span>
            </el-tree>

        </div>
        <div class="dialog__wrap" v-show="stateShow">
          <transition name="background-fade" @after-leave="afterLeave">
              <div class="dialog__background" v-if="show"></div>
          </transition>
          <transition name="fade-move">
              <div class="dialog" v-if="show">
                  <div class="dialog__head">
                      <span class="dialog__head__title">
                          {{topClass}}
                      </span>
                      <i class="iconfont icon-cuo dialog__head__btn" @click="close"></i>
                  </div>
                  <div class="dialog__body">
                      <span>
                          <label for="">所在层级：</label>
                          <input type="text" v-model="bossName">
                      </span>
                      <span>
                          <label for="">{{classInfo}}</label>
                          <input type="text" :placeholder="placeholder" class="message_level" v-model="conttent">
                      </span>
                  </div>
                  <div class="dialog__footer">
                      <button class="dialogbtnner" @click="cancel()" :disabled="pending">取消</button>
                      <button class="dialogbtnner" @click="dialogbtn()" :disabled="pending">完成</button>
                  </div>
              </div>
          </transition>
        </div>
        <so-footer></so-footer>
    </div>
</template>
 
<script>
import setHeader from '@/public/setHeader';
import soFooter from '../components/footer-bar';
// import ViewModal from "@/components/View";

// let id = 1000;
    export default {
      name: "Test",
      data(){ 
        return {
          headTitle: '圈子架构',
          settext: '',
          ind: 0,
          depart:[],
          children: [],    
          treeitem: '', 
          cpId: '',           //企业id
          userInfo: '',     //用户
          treeIconName: 'iconfont icon-gengduo',
          delIconName: 'iconfont icon-shanjian',
          // treemoreShow: false,   //更多
          insertIconShow: true,  //下拉show
          delIconShow: false,  //删除按钮false
          dropintopShow: false,  //下拉
          dropShow: true,       //下拉前三个显示
          updorownShow: false,   //下拉最后一个我的同事隐藏
          conShow: true,
          viewState: false,     //页面滑动组件
          desc:'',
          deId:'',
          type:'',
          stateShow: false,    //添加同级和下级弹框显示或隐藏
          show: false,         //弹框
          bossName: '',        //所在层级
          conttent: '',         //输入的添加信息
          topClass: '',         //层级标题
          classInfo: '',        //同级或下级信息填写
          placeholder: '请填写本次添加的信息',
          pending: false,
          isEdit: true,
          defaultProps: {
            children: 'children',
            label: 'name'
          },
          defaultExpandKeys: [],//默认展开节点列表
        }
      },
      mounted() {
        this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
        this.cpId = this.$route.query.cp_id;
        console.log('this.cpId',this.cpId);
        //获取企业一级部门信息 
        this.getCompanyDepart(0);
        // this.$dragging.$on('dragged', ({ value }) => {
        //   console.log(value.item)
        // })
      },
      methods:{
        // 点击空白处，下拉隐藏
        contentClick() {
          this.dropintopShow = false;
        },
        //获取企业一级部门信息
        getCompanyDepart(val){
            this.$fetch(this.$path + '/index.php/api/circle/depart/'+this.cpId).then((response) => {
                console.log('一级部门信息',response);
                this.depart = response.data.list;   
                // this.arrdata = this.depart;
                // for (let i in this.depart) {
                //     this.arrdata.push(this.depart[i]); //属性
                // }
                this.depart.forEach(treeitem => {
                    treeitem.treeIconName = this.treeIconName;  //添加下拉icon
                    treeitem.delIconName = this.delIconName;  //添加删除icon
                    this.treeitem = treeitem;
                    // treeitem.isEdit = this.isEdit;
                })
                    console.log('转数组',this.depart);
                // this.items = response.data.count;
            })
        },
        
        // 获取每一个三点的id也等于每一个层级的id
        handClick(data) {
          this.deId = data.id;
          this.ind = data.id;
          this.dropintopShow = !this.dropintopShow;  
          this.updorownShow = true;
          // 未指定的不可添加和编辑
          if(data.name == '未指定') {
            this.dropShow = false;
          }else {
            this.dropShow = true;
          }
          console.log('点击id',data.name);
        },
        // 获取每一个层级的id
        handleNodeClick(data){
          data.deId = data.id;
          this.deId = data.deId;
          this.bossName = data.name;
        },
        //添加同级或下级
        addSame(val,type){
            let that = this;
            that.deId = val;
            that.type = type;
            // 弹框出现
            that.show = true;
            that.stateShow = true;
            that.dropintopShow = false;
            that.conttent = '';
            if(that.type == 1) {
              that.topClass = '填写同级信息';
              that.classInfo = '同级信息：';
              that.type == 1;
            }else if(that.type == 2) {
              that.topClass = '填写下级信息';
              that.classInfo = '下级信息：';
              that.type == 2;
            }
            // that.viewState = true;
        },
        // 关闭弹框
        afterLeave() {
          this.stateShow = false;
        },
        close() {
          this.show = false;
        },
        // 点击编辑出现删除按钮
        editorDel(val) {
          this.delIconShow = true;  //删除
          this.insertIconShow  = false;   //三点
          this.dropintopShow = false;   //下拉
          this.settext = '保存';
          this.isEdit = false;  //可编辑状态
          this.deId = val;    //编辑id 
        },
        //点击保存，保存编辑过的内容
        gotobtn() {
          this.insertIconShow  = true;    //三点
          this.delIconShow = false;      //删除
          this.dropintopShow = false;   //下拉
          this.settext = '';
          this.isEdit = true;   //不可编辑状态
          this.contenteditable = false;
          // let labelName = this.$refs.labelName.innerHTML; 

          console.log('保存成功', this.depart);
        },
        // 点击删除按钮删除层级
        delClick(val) {
          console.log('val', val);  //删除id
            this.$fetch(this.$path + '/index.php/api/circle/departDelete/'+val+'/'+this.cpId).then((response) => {
                console.log('删除层级',response);
                if(response.code == 200) {
                  this.getCompanyDepart();
                  this.$openTips({
                      text: "删除成功",
                      time:1000
                  });
                }else {
                  this.$openTips({
                      text: response.msg,
                      time:1000
                  });
                }

            })
        },
        // 关闭
        closePageModal() {
            this.viewState = false;
        },
        // 关闭弹框
        cancel() {
          this.show = false;
        },
        // 确定提交弹框内容
        dialogbtn() {
          this.desc = this.conttent;
          if(this.conttent == '') {
            this.$openTips({
                text: '请完成信息填写',
                time:1000
            });
            return;
          }else {
            //调用接口添加
            this.addSameLevel();
            this.show = false;
          }
        },
        // 保存
        // carryout(data) {
        //     this.desc = data;
        //     //调用接口添加
        //     this.addSameLevel();
        //     this.viewState = false;
        // },
        //调用接口添加
        addSameLevel(){
            let that = this;
            this.$post(this.$path + '/index.php/api/circle/addCompanySame',{deId:this.deId,desc:this.desc,cid:this.cpId,type:this.type}).then((response) => {
                console.log('级别添加',response);
                if(response.code == 200){
                    that.getCompanyDepart();
                    this.dropintopShow = false;
                }else if(response.code == 203){
                    this.dropintopShow = false;
                    that.$openDialog({
                    src: require('../common/images/UI-11.png'),
                    title: '温馨提示',
                    message: response.msg,
                    okText: '确定',
                    callback (flag) {
                        if(flag) {
                            that.getCompanyDepart();
                        } 
                    }
                }); 
                }
            })
        },
        //查看我的同事
        showTeam(val){
            this.$router.push({path: '/userCenter/mycircleColleagueList', query: {cp_id:this.cpId,type:3,deId:val.deId,deName:val.name}}); 
        },


        // 拖拽开始
        handleDragStart(node, ev) {
          console.log('drag start', node);
        },
        handleDragEnter(draggingNode, dropNode, ev) {
          console.log('tree drag enter: ', dropNode.data.name);
        },
        handleDragLeave(draggingNode, dropNode, ev) {
          console.log('tree drag leave: ', dropNode.data.name);
        },
        handleDragOver(draggingNode, dropNode, ev) {
          console.log('tree drag over: ', dropNode.data.name);
        },
        handleDragEnd(draggingNode, dropNode, dropType, ev) {
          console.log('tree drag end: ', dropNode && dropNode.data.name, dropType);
        },
        handleDrop(draggingNode, dropNode, dropType, ev) {
          console.log('tree drop: ', dropNode.data.name, dropType);
        },
        // 判断拖拽节点能否被放置
        allowDrop(draggingNode, dropNode, type) {
          if (dropNode.data.name === '研发部') {
            return type !== 'inner';
          } else {
            return true;
          }
        },
        allowDrag(draggingNode) {      //判断是否允许节点拖拽
          return draggingNode.data.status === 0;
        }
      },
      computed:{
        treeData(){ 
          let cloneData = JSON.parse(JSON.stringify(this.depart))    // 对源数据深度克隆
          let tree = cloneData.filter(father=>{              //循环所有项
            let branchArr = cloneData.filter(child=>{
              return father.id == child.pid;      //返回每一项的子级数组
            });
            if(branchArr.length>0){
              father.children = branchArr;    //如果存在子级，则给父级添加一个children属性，并赋值
            }
            return father.pid==0;      //返回第一层
          });
          return tree     //返回树形数据
        }
      },
      components: {
        setHeader,
        soFooter
        // ViewModal
      }
    }
</script>
 
<style>
.wrap_tree_icon {
    position: absolute;
    top: 0;
    right: 0;
}
.tree_icon {
    font-size: 0.34rem;
    position: relative;
    padding: 0 0.2rem;
}
.custom_tree_icon {
    font-size: 0.34rem;
    position: absolute;
    padding: 0 0.2rem;
    right: 0;
    height: 1rem;
    line-height: 1rem;
}
/* 同事小头像 */
.custom_tree_icon .treeImg {
    width:0.36rem;
    height: 0.36rem; 
    border-radius:50%;
    vertical-align: baseline;
    margin-bottom: -0.05rem;
    display: inline-block;
    margin-left: -0.16rem;
    position: relative;
    z-index: 2;
}
/* 同事头像大于3显示 */
.custom_tree_icon .tree_more {
    font-size: 0.32rem !important;
    background-color: #e50838;
    height: 0.36rem;
    width: 0.36rem;
    line-height: 0.36rem;
    border-radius: 50%;
    color: #fff;
    margin-top: 0.16rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: -0.14rem;
    /* margin-bottom: 0.16rem !important; */
}

/* 编辑状态 */
.edit_dash {
  border: 1px dashed #999;
  padding: 0.08rem;
}

/* 右边字体图标 */
.custom_tree_icon .treeicon {
    height: 1rem;
    line-height: 1rem;
    margin-bottom: 0;
    color: #666;
    margin-top: -0.15rem;
    display: inline-block;
    vertical-align: middle;
}

/* 左边伸缩图标 */

.el-tree-node__content>.el-tree-node__expand-icon {
  display: none;
}
.el-tree {
  text-indent: 0.2rem;
}

/* 点击编辑出现的删除按钮 */
.custom_tree_icon .deltreeicon {
    height: 1rem;
    line-height: 1rem;
    margin-bottom: 0;
    color: #e50838;
    margin-top: -0.15rem;
    display: inline-block;
    font-size: 0.36rem;
}
/* .el-icon-caret-right:before { */
    /* content: "\E646" !important; */
/* } */
/* .el-tree-node__expand-icon.is-leaf { */
    /* color: #333;
    font-size: 0.34rem;
    position: absolute;
    right: 0; */
/* } */
/* 去掉树形结构右边三角符合 */
.el-tree-node__expand-icon {
    /* color: #333;
    font-size: 0.34rem;
    position: absolute;
    right: 0; */
    font-size: 0 !important;
}
/* 第一级 每一层级的样式开始 */
.el-tree-node__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    background: inherit;
    /* background-color: rgba(255, 255, 255, 1); */
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: '微软雅黑';
    font-weight: 400;
    font-style: normal;
    border-bottom: 1px solid #d8d8d8;
    font-size: 0.28rem;
    color: #333;
    /* padding-left: 0.2rem !important; */
    
}
.el-tree-node:focus>.el-tree-node__content {
    background-color: transparent !important;
}
.el-tree-node__content:hover {
    background-color: transparent !important;
}
/* 子级 */
.el-tree-node>.el-tree-node__children {
    background-color: #f5f5f5 !important;
}

/* 下拉框 */
.drop_intop_panel {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 16;
}
.dropDownpanel_icon {
    width: auto;
    height: auto;
    background-color: #fff;
    z-index: 15;
    border-radius: 4px;
    -webkit-box-shadow: 2px 2px 5px rgba(211, 125, 125, 0.34);
    box-shadow: 2px 2px 5px rgba(211, 125, 125, 0.34);
    right: 0.15rem;
    margin-top: -0.3rem;
    position: absolute;
    display: none;
    border: 1px solid #f7f5f5;
}
.custom_tree_icon .active {
    display: block;
}
.dropDownpanel_icon .dropdown_triangle {
    width: 0;
    height: 0;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #fafafa;
    position: absolute;
    right: 0.13rem;
    top: -0.14rem;
    z-index: 15;
}
.dropDownpanel_icon a {
    font-size: 0.3rem;
    color: #333 !important;
    display: block;
    line-height: 0.92rem;
    height: 0.92rem;
    text-align: left;
    padding: 0 0.2rem;
}
.dropDownpanel_icon a .icon-bianji1,
.dropDownpanel_icon a .icon-qiyejiagou,
.dropDownpanel_icon a .icon-tongji,
.dropDownpanel_icon a .icon-tongshi {
  font-size: 0.36rem;
	margin-right: 0.2rem;
	color: #333;
  font-weight: bold;
}

/* 暂无数据 */
.el-tree__empty-text {
  font-size: 0.46rem;
  color: #999;
}
.el-tree__empty-block {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
//添加同级和下级弹框
.dialog {
  width: 6rem;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: #fff;
  font-size: 0.32rem;
  z-index: 10;
  &__wrap {
  }
  &__background {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
  }
  &__head {
    padding: 0.2rem 0.3rem;
    line-height: 1;
    &__title {
      line-height: 1;
      font-size: 0.28rem;
      color: #333;
    }
    &__btn {
      line-height: 1;
      float: right;
      font-size: 0.28rem;
      color: #999;
      // -webkit-text-stroke-width: 0.02rem;   //加粗字体图标
    }
  }
  &__body {
    padding: 0.1rem 0;
    color: #666;
    font-size: 0.28rem;
    white-space: normal;
    word-break: break-all;
    span {
      display: block;
      font-size: 0.24rem;
      color: #333;
      height: 0.66rem;
      line-height: 0.66rem;
      label {
        height: 0.66rem;
        line-height: 0.66rem;
        display: inline-block;
      }
      input {
          padding: 0 0.04rem;
          border: 0;
          outline: none;
          height: 0.66rem;
          line-height: 0.66rem;
          border-bottom: 1px solid #d8d8d8;
      }
    }
  }
  &__footer {
	font-size: 0;
  line-height: 1;
  padding: 0.2rem 0;
    .dialogbtnner {
		    font-size: .22rem;
        background-color: #e50838;
        border-top: 1px solid #e50838;
        width: 1rem;
        padding: .08rem 0;
        color: #fff;
        border-radius: 4px;
        margin: 0 0.1rem;
    }
    .dialogbtnner:first-child {
      background-color: #fff;
      color: #e50838;
      border: 1px solid #e50838;
    }
  }
}
.background-fade {
  &-enter {
    opacity: 0;
  }
  &-enter-active {
    transition: opacity 0.2s;
  }
  &-enter-top {
    opacity: 1;
  }
  &-leave {
    opacity: 1;
  }
  &-leave-active {
    transition: opacity 0.2s;
    opacity: 0;
  }
}
.fade-move {
  &-enter {
    opacity: 0.6;
    top: 45%;
  }
  &-enter-active {
    transition: top 0.4s ease-in-out, opacity 0.4s ease-in-out;
  }
  &-enter-to {
    opacity: 1;
    top: 50%;
  }
  &-leave {
  }
  &-leave-active {
  }
  &-leave-to {
  }
}

</style>

